<template>
  <div v-show="isCanvas" class="mycanvas">
    <h4 class="canvas-title">一周数据统计</h4>

    <canvas id="myChart" style="width: 100%; height: 360px"></canvas>
  </div>
</template>
<script>
import { jsx, Canvas, Chart, Area, Line, Tooltip, Axis } from "@antv/f2";

export default {
  name: "canvasMoudel",
  components: {},
  data() {
    return {
      isCanvas: true,
      visualData: [
        {
          year: "周一",
          sales: 5,
        },
        {
          year: "周二",
          sales: 16,
        },
        {
          year: "周三",
          sales: 8,
        },
        {
          year: "周四",
          sales: 19,
        },
        {
          year: "周五",
          sales: 6,
        },
        {
          year: "周六",
          sales: 11,
        },
        {
          year: "周日",
          sales: 3,
        },
      ],
    };
  },
  methods: {
    myCanvas() {
      const data = this.visualData;
      const context = document.getElementById("myChart").getContext("2d");
      const { props } = (
        <Canvas context={context} pixelRatio={window.devicePixelRatio}>
          <Chart
            data={data}
            scale={{
              year: {
                range: [0, 1],
              },
              sales: {
                min: 0,
                tickCount: 3,
              },
            }}
          >
            <Axis
              field="year"
              style={{
                label: { align: "between" },
              }}
            />
            <Axis field="sales" />
            <Area
              x="year"
              y="sales"
              color="l(90) 0:#1890FF 1:#f7f7f7"
              shape="smooth"
            />
            <Line
              x="year"
              y="sales"
              color="l(180) 0:#4165e6 1:#9941e6"
              shape="smooth"
            />
          </Chart>
        </Canvas>
      );

      const chart = new Canvas(props);
      chart.render();
    },
    changeHide() {
      this.isCanvas = false;
    },
    changeVisible() {
      this.isCanvas = true;
    },
  },
  computed: {},
  watch: {},
  mounted() {
    this.myCanvas();
  },
};
</script>
<style lang="less" scoped>
.mycanvas {
  background-color: #fff;
  height: 450px;
  .canvas-title {
    padding: 16px 0;

    text-align: center;
  }
}
</style>
